<template>
    <div>

        <div class="content1">

            <el-row :gutter="24">
                <el-col :span="12">
                    <div class="mpleft">

                        <div class="mapname">
                            <el-row>
                                <el-col :span="24"><div class="maptitle">寿光蔬菜基地</div></el-col>
                                <el-col :span="24"><div class="mapmsg">已检测180个基地，特色品种46类</div></el-col>
                            </el-row>
                        </div>

                        <div ref="mapRef" class="map" style="width: 100%; height: 520px;">

                        </div>

                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="mpright">
                        <el-row>
                            <el-col :span="24">
                                <div class="mpname">
                                    溯源数据概览
                                </div>
                            </el-col>
                            <el-col :span="24">
                                <el-row :gutter="24">
                                    <el-col :span="12">
                                        <div class="mpcard">
                                            <p class="mpdata">1234</p>
                                            <p class="mpdataname">累计检测基地</p>
                                        </div>

                                    </el-col>
                                    <el-col :span="12">
                                        <div class="mpcard">
                                            <p class="mpdata">1234</p>
                                            <p class="mpdataname">覆盖产品品类</p>
                                        </div>

                                    </el-col>
                                    <el-col :span="12">
                                        <div class="mpcard">
                                            <p class="mpdata">1234</p>
                                            <p class="mpdataname">年度溯源次数</p>
                                        </div>

                                    </el-col>
                                    <el-col :span="12">
                                        <div class="mpcard">
                                            <p class="mpdata">1234</p>
                                            <p class="mpdataname">合格率</p>

                                        </div>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
            </el-row>

        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts'
// 导入城市GeoJSON数据
import china from '@/assets/images/datafie/china.json'
export default {
    data() {
        return {
            mapChart: null,  // 地图实例
            // 特定地点数据
            locations: [
              { name: '西湖', value: [120.1444, 30.2577], desc: '著名旅游景点' },
              { name: '灵隐寺', value: [120.1299, 30.2683], desc: '佛教名刹' },
              { name: '杭州东站', value: [120.2179, 30.2831], desc: '重要交通枢纽' },
              { name: '阿里巴巴总部', value: [120.0823, 30.2778], desc: '科技企业总部' }
            ],
        }
    },
    mounted() {
        // 初始化所有图表
        this.$nextTick(() => {
            this.initMapChart()
            window.addEventListener('resize', this.handleResize)
        })
    },
    beforeUnmount() {
        // 销毁所有图表实例
        if (this.mapChart) this.mapChart.dispose()
        window.removeEventListener('resize', this.handleResize)
    },
    methods:{
        // 初始化地图
        initMapChart() {
            if (this.$refs.mapRef) {
                this.mapChart = echarts.init(this.$refs.mapRef)
                echarts.registerMap('china', china)
                const option = {
                  tooltip: {
                    trigger: 'item',
                    formatter: params => {
                      if (params.data) {
                        return `${params.name}<br/>${params.data.desc}<br/>经纬度: ${params.value[0].toFixed(4)}, ${params.value[1].toFixed(4)}`
                      }
                      return params.name
                    }
                  },
                  geo: {
                    map: 'china',
                    roam: true,
                    zoom: 6,
                    label: {
                      show: true,
                      fontSize: 12
                    },
                    itemStyle: {
                      areaColor: '#f0f8ff',
                      borderColor: '#4682b4',
                      borderWidth: 1
                    },
                    emphasis: {
                      itemStyle: {
                        areaColor: '#87ceeb'
                      }
                    }
                  },
                  series: [
                    {
                      type: 'scatter',
                      coordinateSystem: 'geo',
                      data: this.locations,
                      symbol: 'pin',
                      symbolSize: 20,
                      label: {
                        show: true,
                        position: 'bottom',
                        formatter: params => params.name
                      },
                      itemStyle: {
                        color: '#e63946'
                      },
                      emphasis: {
                        symbolSize: 50
                      }
                    }
                  ]
                }
                this.mapChart.setOption(option)
            }
        },
    }
}
</script>

<style scoped>
.content1 {
    background-color: #f5f5f5;
    padding: 50px 20px;
}
.mpname{
    color: #2c2c2c;
    font-size: 30px;
    text-align: left;
    font-weight: 600;
    margin: 20px 10px;
}
.mpright,
.mpleft {
    height: 520px;
    background-color: #f9fafb;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}
.mpright{
    height: 470px;
    padding: 25px;
}
.mpcard{
    background-color: #ffffff;
    border-radius: 10px;
    margin: 20px 0;
    height: 100px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: start;
}
.mpdata{
    font-size: 35px;
    color: #2e7d32;
}
.mpdataname {
    font-size: 20px;
    color: gray;
}
.map{
    width: 100%;
    height: 520px;
}
.mapname{
    text-align: left;
    position: absolute;
    z-index: 10;
    width: 280px;
    /* height: 100px; */
    background-color: #fff;
    margin: 20px;
    padding: 20px;
    border-radius: 15px;
}

.maptitle{
    color: #000;
}
.mapmsg{
    color: #4b5563;
    font-size: 18px;
}
</style>